function getStyle(ele,attr){
    if(window.getComputedStyle){
     return   window.getComputedStyle(ele,null)[attr];
    }
    return ele.currentStyle[attr]
}


function animate(ele,json,fn){
    clearInterval(ele.timer);
    ele.timer=setInterval(()=>{
    var flag=true;
    current=0;
    target=0;
    step=0;
    for(var attr in json){
        if(attr=="opacity"){
            current=getStyle(ele,attr)*10;
            target=json[attr]*10;
        }else{
            current=parseInt(getStyle(ele,attr));
            target=json[attr];
        }
        step=(target-current)/10;
        step=step>0?Math.ceil(step):Math.floor(step);
        if(attr=="opacity"){
            ele.style[attr]=(current+step)/10;
            ele.style.filter=`Alpha(Opacity=${current+step})`;
        }else if(attr=="zIndex"){
        ele.style[attr]=json[attr]
        }else{
            ele.style[attr]=current+step+"px";
        }
        if(current!=target){
            flag=false;
        }
    }
    if(flag){
        clearInterval(ele.timer);
        if(typeof(fn)=="function"){
            fn()
        }
    }
    },100)
}






// function animate(ele,json,fn){
//     clearInterval(ele.timer);
//     ele.timer=setInterval(()=>{
//         "use strict";
//         let flag = true;
//         let current=0;
//         let target=0;
//         let step =0;
//         for(var attr in json){
//             if(attr=="opacity"){
//                 current=getStyle(ele,attr)*100;
//                 target = json[attr]*100;
//             }else{
//                 current = parseInt(getStyle(ele,attr));
//                 target = json[attr];
//             }
//             step = (target-current)/10;
//             step = step>0?Math.ceil(step):Math.floor(step);
//             if(attr=="opacity"){
//                 ele.style[attr]=(current+step)/100;
//                 ele.style.filter=`Alpha(Opacity=${current+step})`
//             }
//             else if(attr=="zIndex"){
//                 ele.style[attr]=json[attr]
//             }
//             else{
//                 ele.style[attr]=current+step+"px"
//             }
//             if(current!=target){
//                 flag=false;
//             }
//         }
//         if(flag){
//             clearInterval(ele.timer);
//             if(typeof(fn)=="function"){
//                 fn()
//             }
//         }
//     },10)
// }